<template>
  <el-container>
    <el-header>
      <!-- <el-row>
        <el-col :span="10">
          <div class="grid-content bg-purple">
            <div class="header-left">
              <a href="javascript:;">
                <img
                  @click="backhome"
                  src="//cimg.zhaopin.cn/img/newIndexImages/logo.png"
                  alt=""
                />
              </a>
            </div>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="grid-content bg-purple-light">
            <div class="header-right">
              <div>
                <a href="javascript:;" @click="backhome">
                  <span class="el-icon-s-home"></span>
                  首页
                </a>
              </div>
            </div>
          </div>
        </el-col>
      </el-row> -->
      <el-row :gutter="20">
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <div class="header-left">
              <a href="javascript:;">
                <img
                  @click="backhome"
                  src="//cimg.zhaopin.cn/img/newIndexImages/logo.png"
                  alt=""
                />
              </a>
            </div>
            <div class="header-right">
              <div>
                <a href="javascript:;" @click="backhome">
                  <span class="el-icon-s-home"></span>
                  首页
                </a>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
    </el-header>
    <el-main>
      <div class="jinggao">
        <div>
          <span class="el-icon-warning-outline tubiao"></span>
        </div>
        <div>
          <span class="wenzi">
            光明招聘提示每一位求职者：若用人单位存在提供虚假招聘信息、发布虚假招聘广告，以担保或者其他任何名义向求职者收取财物（如办卡费、押金、培训费），扣押或以保管为名索要身份证、毕业证及其他证件等行为，均涉嫌违法，请您提高警惕并注意保护个人信息。
          </span>
        </div>
      </div>
      <div class="zhaoping">
        <div class="timer">
          <span class="el-icon-time"></span>
          <span>发布时间99：99：99</span>
        </div>
        <div class="gangwei">
          <h3>招聘岗位</h3>
        </div>
        <div class="businessname">公司名称</div>
        <div class="city">
          <span>城市</span>
          <el-divider direction="vertical"></el-divider>
          <span>学历</span>
        </div>
      </div>
      <div class="gangweiyaoqiu">
        <div class="gangweimiaoshu">
          <el-divider content-position="left">岗位描述</el-divider>
        </div>
        <div class="gangweizhize">岗位职责：</div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.el-header {
  background-color: rgb(154, 207, 191);
  .header-left {
    float: left;
    margin-top: 13px;
    margin-left: 190px;
  }
  .header-right {
    float: right;
    margin-top: 13px;
    margin-right: -305px;
    div {
      height: 30px;
      line-height: 30px;
      a {
        font-size: 18px;
        text-decoration: none;
        color: #fff;
      }
    }
  }
}

.el-main {
  width: 1100px;
  height: 1000px;
  margin: 10px auto;
  background-color: #eee;
  padding: 0 !important;
  .jinggao {
    height: 50px;
    background-color: pink;
    margin: 0;
    .tubiao {
      font-size: 20px;
      float: left;
      line-height: 50px;
    }
    .wenzi {
      font-size: 12px;
      color: orange;
      margin-left: 10px;
    }
  }
  .zhaoping {
    height: 300px;
    background-color: palegreen;
    position: relative;
    .timer {
      position: absolute;
      top: 20px;
      left: 20px;
    }
    .gangwei {
      position: absolute;
      left: 20px;
      top: 50px;
    }
    .businessname {
      position: absolute;
      left: 20px;
      top: 90px;
      font-size: 16px;
      color: blue;
    }
    .city {
      position: absolute;
      left: 20px;
      top: 120px;
    }
  }
  .gangweiyaoqiu {
    height: 500px;
    position: relative;
    .gangweimiaoshu {
      height: 50px;
    }
    .gangweizhize {
      position: absolute;
      left: 20px;
      top: 50px;
    }
  }
}
</style>